<template>
  <div class="case_page_box">
    <div class="case_page_inner_box" :class="{inner:$route.name==='OpenCaseAppearCourt'}" v-if="isLoaded">
      <!-- 案件头部 -->
      <div class="case_page_box_header" :style="skin.style.case_page_box_header" v-show="!fullScreen">
        <div class="case_page_box_header_item" :style="activeItem===2?skin.style.case_page_box_header_item_selected:''"
             @click="toYAZZ">
          <img src="~@/assets/img/AppearCourt/1_03.png">
          <span>预案制作</span>
        </div>
        <div class="case_page_box_header_item" :style="activeItem===3?skin.style.case_page_box_header_item_selected:''"
             @click="toYJFZ">

          <img src="~@/assets/img/AppearCourt/1_05.png">
          <span>阅卷辅助</span>

        </div>
        <div class="case_page_box_header_item" :style="activeItem===4?skin.style.case_page_box_header_item_selected:''"
             @click="activeItem=4">
          <img src="~@/assets/img/AppearCourt/1_07.png">
          <span>全案检索</span>
        </div>
        <div class="case_page_box_header_item" :style="activeItem===5?skin.style.case_page_box_header_item_selected:''"
             @click="activeItem=5">
          <img src="~@/assets/img/AppearCourt/1_09.png">
          <span>案件信息</span>
        </div>
        <div class="case_page_box_header_item" @click="showTemplate=true">
          <img src="~@/assets/img/AppearCourt/1_13.png">
          <span>模板管理</span>
        </div>
        <div class="case_page_box_header_item" @click="showDownloadDetailModal=true" v-if="!isBrowser">
          <img src="~@/assets/img/AppearCourt/1_11.png">
          <span>卷宗下载</span>
        </div>

        <div class="case_page_box_header_item" @click="_closeCase" title="关闭案件"
             v-show="!isBrowser"></div>
        <div class="case_page_box_header_item" @click="downloadCase" title="下载案件" v-show="isBrowser">下载案件</div>
        <div class="case_page_box_header_item" @click="downloadClient" title="下载客户端" v-show="isBrowser">下载客户端</div>

      </div>
      <div class="case_page_box_container" :class="{fullScreen:fullScreen}">
        <pre-plan class="preplan" v-show="activeItem===2" ref="prePlan"></pre-plan>
        <marking-aided ref="marking" :class="{box_show:activeItem===3,box_hide:activeItem!==3}"></marking-aided>
        <vfull-text-search v-show="activeItem === 4"></vfull-text-search>
        <case-detail v-show="activeItem === 5"></case-detail>
      </div>
    </div>
    <!--案件下载-->
    <vmodal :modalshow="showDownloadDetailModal" modaltitle="卷宗下载" :closeonclickmodal="false"
            :styleobj="{width:'600px',height:'400px'}" @hide="showDownloadDetailModal=false">
      <div slot="modal" style="width: 100%;height: 100%;position: relative !important;">
        <download-detail :selected-case="caseInfo" :is-continue="true"
                         @hide="showDownloadDetailModal = false"></download-detail>
      </div>
    </vmodal>
    <!--模板管理-->
    <vmodal :modalshow="showTemplate" modaltitle="模板管理" :closeonclickmodal="false"
            :styleobj="{width: '700px',height: '437px'}" @hide="showTemplate = false">
      <div slot="modal" style="width: 100%;height: 100%;">
        <select-template @hideView="showTemplate = false" ref="select"></select-template>
      </div>
    </vmodal>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  const skin = require('../config/skin')
  const config = require('../config/config')
  const {util: {uncompileStr}} = require('../util')
  const quantity = require('../common/quantity')

  export default {
    name: 'appearCourt',
    data () {
      return {
        activeItem: 2,
        showDownloadDetailModal: false,
        showTemplate: false,
        skin: skin[skin.useSkin],
        showYJFZTip: false,
        isLoaded: false,
      }
    },
    computed: {
      ...mapState({
        fullScreen: state => state.container.fullScreen,
        caseInfo: state => state.appearCourt.caseInfo
      })
    },
    async mounted () {
      try {
        if (process.browser) {
          let casepath = uncompileStr(this.$route.query.casepath)
          if (!casepath) return this.$router.replace({path: '/CTY/AppearCourtCloud'})
          console.log('casepath', casepath)
          await this.openCase({
            casePath: casepath,
            caseID: uncompileStr(this.$route.query.caseid)
          })
        }
        // this.$store.commit('setCasePath', caseid);
        // await this.$store.dispatch(action.appearCourt.initAppearCourt);
        this.isLoaded = true
      } catch (e) {
        console.error(e, e.message)
        await this.$alert(e.message, '初始化错误', {type: 'error'})
        // await this.closeCase();
      } finally {
        this.loading = false
      }
    },
    methods: {
      async downloadCase () {
        let self = this
        // self.loadStatus({loading: true, loadingText: '正在下载证据材料...'})
        // await this.$api.post.downLoadEvidenceMaterialByCodes({dbFile: this.$store.state.appearCourt.casePath})
        // console.log(this.caseInfo)
        self.loadStatus({loading: true, loadingText: '正在打包案件文件...'})
        let casePath = await this.$api.post.zipCaseFile(this.caseInfo.BMSAH)
        self.loadStatus({loading: true, loadingText: '正在下载案件包...'})
        window.location.href = `http://${config.serverIp}:${config.serverPort}/CaseFileInfo/downloadCaseFile?path=${casePath}&delDir=true`
        setTimeout(function () {
          self.loadStatus({loading: false})
        }, 10000)
      },
      downloadClient () {
        window.location.href = `http://${config.serverIp}:${config.serverPort}/ClientFile/downloadClientFile`
      },
      async toYJFZ () {
        await this.$store.dispatch(quantity.action.appearCourt.initDossier, this.$refs.marking.$refs.dossierTree.currDossierID)

        this.activeItem = 3
        if (!this.showYJFZTip) {
          this.$notify({
            message: '已自动跳转至上次浏览位置',
            position: 'bottom-right',
            type: 'info'
          })
          this.showYJFZTip = true
        }
      },
      async toYAZZ () {
        await this.$store.dispatch(quantity.action.appearCourt.initDossier, this.$refs.prePlan.$refs.dossierTree.currDossierID)
        this.activeItem = 2
      },
      async _closeCase () {
        try {
          await this.$confirm(
            '是否退出【' + this.caseInfo.AJMC + '】？',
            '提示',
            {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'info'
            }
          )
          this.loadStatus({loading: true, loadingText: '案件关闭中...'})
          await this.closeCase()
        } finally {
          this.loadStatus({loading: false})
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .case_page_box {
    width: 100%;
    height: 100%;

    .case_page_inner_box {
      width: 100%;
      height: 100%;
    }
  }

  .case_page_box_header {
    width: 100%;
    height: 35px;
    background: #a9d8f5;
    line-height: 35px;
    overflow: hidden;
    position: relative;
    font-size: 0;
  }

  .case_page_box_header .case_page_box_header_item {
    display: inline-block;
    color: #447bbf;
    width: 115px;
    height: 100%;
    /*margin: 0 5px;*/
    padding: 0 10px;
    font-size: 16px;
    outline: none;
    text-align: center;
  }

  .case_page_box_header_item img {
    height: 100%;
    padding: 8px;
    padding-left: 0;
    padding-right: 0;
  }

  .case_page_box_header > .case_page_box_header_item:nth-child(1) {
    margin-left: 5px;
  }


  .case_page_box_header > .case_page_box_header_item:nth-last-child(1) {
    position: absolute;
    right: 0;
    width: 110px;
    background-position: left center;
    background-image: url("~@/assets/img/down.png");
    background-repeat: no-repeat;
  }

  .inner .case_page_box_header > .case_page_box_header_item:nth-last-child(2) {
    position: absolute;
    right: 100px;
    width: 110px;
    background-position: left center;
    background-image: url("~@/assets/img/down.png");
    background-repeat: no-repeat;
  }


  .case_page_box_header > .case_page_box_header_item:nth-last-child(3) {
    position: absolute;
    right: 0;
    width: 40px;
    background-image: url("~@/assets/img/closeaj.png");
    background-position: center;
    background-repeat: no-repeat;
  }

  .case_page_box_header .case_page_box_header_item:hover {
    color: #18a6ef;
  }

  .case_page_box_container {
    width: 100%;
    height: calc(100% - 35px);
    background: #eff4f5;
    font-size: 0;
    padding: 5px;
    position: relative;
  }

  .case_page_box_container.fullScreen {
    height: 100% !important;
  }

  .case_page_box_container > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: inline-block;
    height: 100%;
  }
</style>
